<template>
	<el-container>
		<el-aside>
			<el-container>
				<el-header>
					<el-select
						v-model="search.processId"
						filterable
						remote
						reserve-keyword
						placeholder="请输入关键词"
						:remote-method="remoteMethod"
						:loading="loading"
						style="width:100%"
						@change="upsearch"
					>
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</el-header>
				<el-main class="nopadding infinite-list" v-infinite-scroll="load" style="overflow:auto">
					<el-card v-for="item in recordList" class="infinite-list-item" :key="item.recordId" style="cursor: pointer" @click="showRecordList(item)">
						<template v-slot:header>
							<div style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;" :title="item.title">
								{{ item.title }}
							</div>
						</template>
						<div style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;" :title="item.remark">
							{{ item.remark }}
						</div>
						<div style="margin-top:10px;">
							<div style="display: contents;">
								<el-avatar :src="item.avatar" size="small"></el-avatar>
							</div>
							<div style="position: relative;top: -5px;display: inline-block;">
								<span style="margin-left: 15px">{{ item.userName }}</span>
								<span style="float: right">
								<div>
									<el-icon><el-icon-clock/></el-icon>{{ item.createTime }}
								</div>
							</span>
							</div>
						</div>
					</el-card>
				</el-main>
			</el-container>
		</el-aside>
		<el-container>
			<el-main class="nopadding">
				<div>
					<el-card v-if="item!=null">
						<template v-slot:header>
							<div>
								{{ item.title }}
							</div>
						</template>
						<div>
							<div style="display: contents;">
								<el-avatar :src="item.avatar" size="small"></el-avatar>
							</div>
							<div style="position: relative;top: -5px;display: inline-block;">
								<span style="margin-left: 15px">{{ item.userName }}</span>
								<span style="float: right;margin-left: 20px">
								<div>
									<el-icon><el-icon-clock/></el-icon>{{ item.createTime }}
								</div>
							</span>
							</div>
						</div>
						<div v-html="item.remark" style="margin-top:10px"></div>
						<attach-menu :attachIds="item.attachId" :roleFlag="1" :preview="true"></attach-menu>
						<div style="margin: 20px;text-align: right;">
							<el-button type="text" @click="sendRecord(item)">回复</el-button>
						</div>
						<el-card v-for="childItem in myRecordList" :key="childItem.recordId" style="margin-bottom: 20px;">
							<template v-slot:header>
								<div>
									{{ childItem.title }}
								</div>
							</template>
							<div>
								<div style="display: contents;">
									<el-avatar :src="childItem.avatar" size="small"></el-avatar>
								</div>
								<div style="position: relative;top: -5px;display: inline-block;">
									<span style="margin-left: 15px">{{ childItem.userName }}</span>
									<span style="float: right;margin-left: 20px">
												<el-icon><el-icon-clock/></el-icon>{{ childItem.createTime }}
										</span>
								</div>
							</div>
							<div v-html="childItem.remark" style="margin-top:10px;margin-bottom: 10px;"></div>
							<attach-menu :attachIds="childItem.attachId" :roleFlag="1" :preview="true"></attach-menu>
							<div style="margin: 10px">
								<div style="text-align: right" v-if="childItem.isMe=='true'">
									<el-button type="text" @click="editRecord(childItem)">编辑</el-button>
									<el-button type="text" @click="deleteMyRecord(childItem)">删除</el-button>
								</div>
							</div>
						</el-card>
					</el-card>
				</div>
			</el-main>
		</el-container>
		<el-aside>
			<el-container>
				<el-header style="text-align: center;"><span style="font-weight: 600;font-size: 16px;width: 100%">参与用户</span></el-header>
				<el-main class="nopadding">
					<ul class="msg-list">
						<li v-for="item in userList" v-bind:key="item.accountId" style="cursor: pointer;">
							<a target="_blank">
								<div class="msg-list__icon">
									<el-badge type="danger">
										<el-avatar :size="40" :src="item.avatar"></el-avatar>
									</el-badge>
								</div>
								<div class="msg-list__main">
									<h2>{{ item.userName }}</h2>
									<p>{{ item.deptName }}</p>
								</div>
								<div class="msg-list__time">
									<p>{{ item.levelName }}</p>
								</div>
							</a>
						</li>
					</ul>
				</el-main>
			</el-container>
		</el-aside>
	</el-container>
	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>
</template>

<script>
import saveDialog from './save'
import AttachMenu from '@/views/module/attachMenu'
export default {
	name: 'Supervision Problem Manage',
	components: {
		AttachMenu,
		saveDialog
	},
	data() {
		return {
			loading:false,
			options:[],
			dialog: {
				save: false
			},
			recordList: [],
			myRecordList: [],
			loadFlag:true,
			loadStatus:true,
			userList:[],
			item: null,
			search: {
				processId:"",
				page: 0,
				keyword: ""
			}
		}
	},
	watch: {
		recordList(val) {
			if (val.length > 0) {
				if(this.item==null)
				{
					this.showRecordList(val[0])
				}
			}
		}
	},
	mounted() {
	},
	methods: {
		async getSupervisionProcessUserList()
		{
			let res = await this.$API.supervision.supervisionProblem.getSupervisionProcessUserList.get({recordId: this.item.recordId});
			if (res.code == 200) {
				this.userList = res.data
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		async showRecordList(item) {
			this.item = item;
			let res = await this.$API.supervision.supervisionProblem.getMySupervisionAnswerList.get({recordId: this.item.recordId});
			if (res.code == 200) {
				this.myRecordList = res.data
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
			this.getSupervisionProcessUserList();
		},
		sendRecord(item) {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open("add").setData(item);
			})
		},
		editRecord(item){
			let params={
				recordId:item.recordId,
				remark:item.remark,
				attachId:item.attachId,
				process:item.processId,
				pRemark:this.item.remark,
				pAttachId:this.item.attachId,
				pRecordId:this.item.recordId
			}
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open("edit").setData(params)
			})
		},
		async deleteRecord(item) {
			let res = await this.$API.supervision.supervisionProblem.deleteSupervisionProblem.post({recordId:item.recordId});
			if (res.code == 200) {
				this.recordList.splice(this.recordList.findIndex(record => record.recordId === item.recordId), 1);
				this.item=null;
				this.myRecordList=[];
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		async deleteMyRecord(item) {
			let res = await this.$API.supervision.supervisionProblem.deleteSupervisionProblem.post({recordId:item.recordId});
			if (res.code == 200) {
				this.myRecordList.splice(this.myRecordList.findIndex(record => record.recordId === item.recordId), 1);
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		async upsearch() {
			this.recordList = [];
			this.search.page = 0;
			this.loadFlag = true;
			this.load();
		},
		load() {
			if(this.loadFlag&&this.loadStatus) {
				this.loadStatus = false;
				this.getLeadSupervisionProblemList();
			}
		},
		async getLeadSupervisionProblemList() {
			let res = await this.$API.supervision.supervisionProblem.getLeadSupervisionProblemList.get(this.search);
			if (res.code == 200) {
				this.recordList = this.recordList.concat(res.data);
				this.search.page = this.search.page + 10;
				this.loadStatus = true;
				if(res.data.length<10)
				{
					this.loadFlag = false
				}
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		async remoteMethod(keyword) {
			let res = await this.$API.supervision.supervisionProcess.getSupervisionProcessForSelect.get({keyword: keyword});
			if (res.code == 200) {
				let resData = [{value:'',label:'全部'}]
				this.options = resData.concat(res.data);
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		//本地更新数据
		handleSaveSuccess() {
			this.showRecordList(this.item);
		}
	}
}
</script>

<style scoped>
:deep(.el-calendar__header) {
	padding: 0px 0px 10px 0px;
}

:deep(.el-calendar-table .el-calendar-day) {
	height: 30px;
	text-align: center;
}

:deep(.el-calendar-table td) {
	border-bottom: 0px solid #EBEEF5;
	border-right: 0px solid #EBEEF5;
}

:deep(.el-calendar-table tr td:first-child) {
	border-left: 0px solid #EBEEF5;
}

:deep(.el-calendar-table tr:first-child td) {
	border-top: 0px solid #EBEEF5;
}

:deep(.el-calendar__body) {
	border-top: 1px solid #EBEEF5;
	padding: 5px;
p {
	text-align: center;

i {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	background-color: #D0333C;
	border-radius: 50%;
	text-align: center;
}
}
}
:deep(.el-calendar__header) {
	border-bottom: 0px solid #EBEEF5;

.el-calendar__title {
	display: none;
}

.el-calendar__button-group {
	margin-left: 10%;
}

}
:deep(.el-input__inner) {
	line-height: 28px;
	height: 28px;
	width: 100%;
}

:deep(.el-date-editor.el-input) {
	width: 30%;
	float: left;

.el-input__icon {
	line-height: 28px;
}

}
:deep(.el-input--suffix .el-input__inner) {
	padding-right: 0px;
}

:deep(.el-input__suffix) {
	display: none;
}

div:hover {
	color: #2c3e50;
}

.msg-list li {
	border-top: 1px solid #eee;
}

.msg-list li a {
	display: flex;
	padding: 20px;
}

.msg-list li a:hover {
	background: #ecf5ff;
}

.msg-list__icon {
	width: 40px;
	margin-right: 15px;
}

.msg-list__main {
	flex: 1;
}

.msg-list__main h2 {
	font-size: 15px;
	font-weight: normal;
	color: #333;
}

.msg-list__main p {
	font-size: 12px;
	color: #999;
	line-height: 1.8;
	margin-top: 5px;
}

.msg-list__time {
	width: 100px;
	text-align: right;
	color: #999;
}
</style>
